<template>
  <div class="jl_body jl_base">
    <transition :name="transitionName" id="asdfsadf">
      <navigation>
        <router-view/>
      </navigation>
    </transition>
    <jl-tabs :tabList="tabList"></jl-tabs>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        transitionName: 'fade',
        tabList: [
          {ionic: '\ue527', name: '登录单', path: '/agent/start'},
          {ionic: '\ue507', name: '客户要货', path: '/agent/customerNeed'},
          {ionic: '\ue506', name: '工程要货', path: '/agent/need'},
          {ionic: '\ue8bd', name: '交资料', path: '/agent/data'},
          {ionic: '\ue60f', name: '我的', path: '/agent/my'}
        ]
      }
    },
    methods: {
      loadNavigation() {
        this.$navigation.on('forward', (to, from) => {
          this.transitionName = 'slide-left'
        })
        this.$navigation.on('back', (to, from) => {
          this.transitionName = 'slide-right'
        })
        this.$navigation.on('replace', (to, from) => {
          if (to.route.meta.index > from.route.meta.index) {
            this.transitionName = 'slide-left'
          } else {
            this.transitionName = 'slide-right'
          }
        })
        this.$navigation.on('refresh', (to, from) => {
        })
        this.$navigation.on('reset', () => {
        })
        // and use [once, off] methods
        this.$navigation.once('forward', () => {
        })
        const off = () => {
        }
        this.$navigation.on('forward', off)
        this.$navigation.off('forward', off)
      }
    },
    created() {
      this.loadNavigation()
    }
  }
</script>

<style scoped>
</style>
